<template>
  <div class="user-edit">
    <!-- Drawer抽屉 -->
    <Drawer
      :title="title"
      v-model="visible"
      width="720"
      draggable
      :mask-closable="type == '0'"
    >
      <!-- 公司名称 -->
      <div>
        <div style="width: 100%; height: 15px"></div>
        <Form
          :model="companyLicenseForm"
          ref="companyLicenseForm"
          :rules="companyForm"
          :label-width="140"
          inline
        >
          <div style="margin-left: -57px">
            <div style="display: flex">
              <div>
                <FormItem label="公司名称" prop="companyName">
                  <Input
                    placeholder="请输入公司名称"
                    style="width: 205px"
                    v-model="companyLicenseForm.companyName"
                    clearable
                  />
                </FormItem>
              </div>
              <div style="margin-left: 56px">
                <FormItem label="统一社会信用代码" prop="certNo">
                  <Input
                    placeholder="请输入统一社会信用代码"
                    v-model="companyLicenseForm.certNo"
                    style="width: 155px"
                  />
                </FormItem>
              </div>
            </div>
            <FormItem label="公司类型" prop="type">
              <Input
                placeholder="请输入公司类型"
                style="width: 205px"
                v-model="companyLicenseForm.type"
                clearable
              />
            </FormItem>
            <FormItem label="通讯地址" prop="street">
              <Input
                placeholder="请输入通讯地址"
                style="width: 205px"
                v-model="companyLicenseForm.street"
                clearable
              />
            </FormItem>
            <div style="display: flex">
              <div style="margin-left: 14px">
                <FormItem label="法定代表人" prop="companyUserName">
                  <Input
                    style="width: 191px"
                    placeholder="请输入法定代表人"
                    v-model="companyLicenseForm.companyUserName"
                    clearable
                  />
                </FormItem>
              </div>
              <div>
                <FormItem label="注册电话" prop="companyUserPhone">
                  <Input
                    placeholder="请输入注册电话"
                    style="width: 205px"
                    v-model="companyLicenseForm.companyUserPhone"
                    clearable
                  />
                </FormItem>
              </div>
            </div>
            <FormItem label="开户银行" prop="bankName">
              <Input
                placeholder="请输入开户银行"
                style="width: 205px"
                v-model="companyLicenseForm.bankName"
                clearable
              />
            </FormItem>
            <FormItem label="对公账户" prop="bankCode">
              <Input
                placeholder="请输入对公账户"
                style="width: 205px"
                v-model="companyLicenseForm.bankCode"
                clearable
              />
            </FormItem>
          </div>
          <Row>
            <Col span="8">
              <div
                v-if="companyPicFileUrl"
                style="
                  width: 148px;
                  height: 92px;
                  line-height: 75px;
                  margin-bottom: 7px;
                "
              >
                <div class="demo-upload-list-company">
                  <img
                    v-if="companyPicFileUrl != ''"
                    style="width: 58px"
                    height="100px"
                    :src="companyPicFileUrl"
                  />
                  <img
                    style="width: 58px"
                    height="100px"
                    src="@/assets/vehicleAtes/owner3.png"
                  />
                  <div
                    v-if="companyPicFileUrl != ''"
                    class="demo-upload-list-company-cover"
                  >
                    <Icon
                      type="ios-eye-outline"
                      @click.stop="showPic(companyPicFileUrl)"
                    ></Icon>
                    <Icon
                      type="ios-trash-outline"
                      @click.stop="handleRemove(companyPicFileUrl, 1)"
                    ></Icon>
                  </div>
                </div>
              </div>
              <Upload
                class="Upload-border"
                v-else
                :on-progress="BusinessLicen"
                :beforeUpload="beforeUpload"
                ref="companyUpload"
                :show-upload-list="false"
                :on-success="handleSuccess"
                :format="['jpg', 'jpeg', 'png']"
                :on-format-error="handleFormatError"
                :headers="header"
                :data="{
                  fileType: 'IDCARD_FONT_PIC',
                  userId: idCardIdForms.userId,
                }"
                type="drag"
                :action="upLoadCompanyLicense"
                style="display: inline-block"
              >
                <div style="width: 148px; height: 92px; line-height: 75px">
                  <div class="demo-upload-list-company">
                    <img
                      v-if="companyPicFileUrl != ''"
                      style="width: 58px"
                      height="100px"
                      :src="companyPicFileUrl"
                    />
                    <img
                      style="width: 58px"
                      height="100px"
                      src="@/assets/vehicleAtes/owner3.png"
                    />
                    <div
                      v-if="companyPicFileUrl != ''"
                      class="demo-upload-list-company-cover"
                    >
                      <Icon
                        type="ios-eye-outline"
                        @click.stop="showPic(companyPicFileUrl)"
                      ></Icon>
                      <Icon
                        type="ios-trash-outline"
                        @click.stop="handleRemove(companyPicFileUrl, 1)"
                      ></Icon>
                    </div>
                  </div>
                </div>
              </Upload>
              <div class="demo-uploadcss-compny">
                <template>
                  <Progress
                    v-if="progressBusinessLicen"
                    text-inside
                    :percent="load"
                    :stroke-width="3"
                  ></Progress>
                </template>
              </div>
              <div style="margin-top: 15px" class="check">
                <span class="check_font">营业执照</span>
              </div>
            </Col>
          </Row>
        </Form>
      </div>

      <div class="drawer-footer br" v-show="type != '0'">
        <Button
          type="warning"
          @click="submitCompanyLicenseInfo"
          :loading="loadinLicenseInfo"
          >保存资料</Button
        >
        <Button @click="visible = false">取消</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
import { upLoadCompanyLicense } from "@/api/index";
import departmentTreeChoose from "@/views/my-components/freight/department-tree-choose";
import uploadPicInput from "@/views/my-components/freight/upload-pic-input";
import SetPassword from "@/views/my-components/freight/set-password";
import { getStore } from "@/libs/storage";
import * as imageConversion from "image-conversion";
export default {
  name: "user",
  components: {
    departmentTreeChoose,
    uploadPicInput,
    SetPassword,
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
    },
    type: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      loadinLicenseInfo: false,
      header: {
        accessToken: getStore("accessToken"),
      },
      accessToken: getStore("accessToken"),
      
      visible: this.value,
      title: "新增承运人",
      passColor: "",
      submitLoading: false,
      maxHeight: 510,

      disabledGroup: "企业货主",
      companyLicenseForm: {
        userId: "",
        companyName: "", //公司名称
        companyUserName: "", //法人
        certNo: "", //公司统一社会信用代码
        companyPhone: "", //公司注册电话
        street: "", //通讯地址
        companyUserPhone: "", //法人电话
        bankName: "", //开户行
        bankCode: "", //开户行账号
        type: "", //公司类型
        capital: "", //注册资金
        business: "", //经营范围
        startDate: "", //注册时间
        endDate: "", //截止日期
        companyLicenseFileId: "", //公司营业执照图片地址
        authorizationId: "", //委托授权书
      },
      companyForm: {
        companyName: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
        ],
        companyUserName: [
          { required: true, message: "请输入法定代表人", trigger: "blur" },
        ],
        street: [
          { required: true, message: "请输入通讯地址", trigger: "blur" },
        ],
        companyUserPhone: [
          { required: true, message: "请输入法人电话", trigger: "blur" },
        ],
        companyPhone: [
          { required: true, message: "请输入注册电话", trigger: "blur" },
        ],
        bankName: [
          { required: true, message: "请输入开户银行", trigger: "blur" },
        ],
        bankCode: [
          { required: true, message: "请输入对公账户", trigger: "blur" },
        ],
        certNo: [
          {
            required: true,
            message: "请输入统一社会信用代码",
            trigger: "blur",
          },
        ],
        type: [{ required: true, message: "请输入公司类型", trigger: "blur" }],
      },
      idCardIdForms: {
        userId: "",
      },
      progressBusinessLicen: false, // 营业执照
      companyPicFileUrl: "", // 营业执照

      upLoadCompanyLicense: upLoadCompanyLicense,
    };
  },
  methods: {
    // 删除图片
    handleRemove(file, num) {
      if (num == 1) {
        // 营业执照
        this.companyPicFileUrl = "";
      } else if (num == 2) {
        // 联系人信息身份证正面
        this.enterpriseIdCardFontPicFileUrl = "";
      } else if (num == 3) {
        // 联系人信息身份证反面
        this.enterprIseidCardBackPicFileUrl = "";
      } else if (num == 4) {
        // 法人信息身份证正面
        this.corporateidCardFontPicFileUrl = "";
      } else if (num == 5) {
        //法人信息身份证反面
        this.corporateidCardBackPicFileUrl = "";
      }
    },
    // 查看图片
    showPic(v) {
      let image = new Image();
      image.src = v;
      let viewer = new Viewer(image, {
        hidden: function () {
          viewer.destroy();
        },
      });
      viewer.show();
    },
    // 营业执照 企业信息
    BusinessLicen(event, file, fileList) {
      this.progressAll(event, 3);
    },
    // 进度条
    progressAll(data, num) {
      if (num == 1) {
        //身份证正面进度条
        this.progressFlagnum = true; // 显示进度条
      } else if (num == 2) {
        //身份证反面进度条
        this.progressCardBack = true; // 显示进度条
      } else if (num == 3) {
        this.progressBusinessLicen = true;
      } else if (num == 4) {
        this.progressFront = true;
      } else if (num == 5) {
        this.progressReverse = true;
      } else if (num == 6) {
        this.corporateFront = true;
      } else if (num == 7) {
        this.corporateReverse = true;
      } else if (num == 8) {
        this.progressAgreement = true;
      } else if (num == 9) {
        this.handHeldProgress = true;
      } else if (num == 10) {
        this.handHeldCorporate = true;
      } else if (num == 11) {
        this.personalIDCard = true;
      } else if (num == 12) {
        this.personalIDCardard = true;
      }

      var CardBack = setTimeout(() => {
        this.load = parseInt(data.percent); // 动态获取文件上传进度
      }, 500); // 一秒后关闭进度条
      setTimeout(() => {
        if (this.load >= 100) {
          this.load = 100;
          setTimeout(() => {
            if (num == 1) {
              this.progressFlagnum = false; // 显示进度条
            } else if (num == 2) {
              this.progressCardBack = false; // 显示进度条
            } else if (num == 3) {
              this.progressBusinessLicen = false;
            } else if (num == 4) {
              this.progressFront = false;
            } else if (num == 5) {
              this.progressReverse = false;
            } else if (num == 6) {
              this.corporateFront = false;
            } else if (num == 7) {
              this.corporateReverse = false;
            } else if (num == 8) {
              this.progressAgreement = false;
            } else if (num == 9) {
              this.handHeldProgress = false;
            } else if (num == 10) {
              this.handHeldCorporate = false;
            } else if (num == 11) {
              this.personalIDCard = false;
            } else if (num == 12) {
              this.personalIDCardard = false;
            }
          }, 1000); // 一秒后关闭进度条
          clearTimeout(CardBack);
        }
      }, 501);
    },

    //压缩图片
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        // console.log("压缩前", file); // 压缩到400KB,大于400KB的图片都会进行压缩，小于则不会
        imageConversion.compressAccurately(file, 100).then((res) => {
          res = new File([res], file.name, {
            type: res.type,
            lastModified: Date.now(),
          });
          resolve(res);
        });
      });
    },
    // 营业执照
    handleSuccess(res, file, fileList) {
      if (res.code == 500) {
        this.$Message.error(res.message);
        return;
      } else if (res.code == 200) {
        this.$Message.success("上传成功");
        this.form = { ...this.form, ...res.result };
        // this.companyLicenseForm = res.result;
        this.companyLicenseForm.companyName = res.result.companyName;
        this.companyLicenseForm.companyUserName = res.result.companyUserName;
        this.companyLicenseForm.certNo = res.result.certNo;
        this.companyLicenseForm.companyPhone = res.result.companyPhone;
        this.companyLicenseForm.street = res.result.street;
        this.companyLicenseForm.bankName = res.result.bankName;
        this.companyLicenseForm.bankCode = res.result.bankCode;
        this.companyLicenseForm.type = res.result.type;
        this.companyLicenseForm.capital = res.result.capital;
        this.companyLicenseForm.business = res.result.business;
        this.companyLicenseForm.startDate = res.result.startDate;
        this.companyLicenseForm.endDate = res.result.endDate;
        this.companyLicenseForm.companyLicenseFileId = res.result.fileId;
        if (this.companyLicenseForm.companyLicenseFileId != null) {
          this.companyPicFileUrl =
            this.$baseUrl +
            "/freight/file/view/" +
            this.companyLicenseForm.companyLicenseFileId +
            "?accessToken=" +
            this.accessToken +
            "&preview=true";
        }
      }
    },
    //图片格式验证失败时的钩子
    handleFormatError(file) {
      this.$Message.error("图片格式错误,指定上传图片格式 jpg、jpeg、png");
    },
    init() {},
    handleSelectDepTree(v) {
      this.form.departmentId = v;
    },
    changePass(v, grade, strength) {
      this.form.passStrength = strength;
    },
    // 提交
    // 企业认证保存
    submitCompanyLicenseInfo() {
      let form = false;
      let form2 = false;
      let form3 = false;
      this.$refs.companyLicenseForm.validate((valid) => {
        if (valid) {
          form = true;
        } else {
          form = false;
          if (this.companyPicFileUrl == "") {
            return this.$Message.error("请上传营业执照");
          }
          return this.$Message.error("企业认证资料不完整");
        }
      });
      this.$refs.companyLicenseForm2.validate((valid) => {
        if (valid) {
          form2 = true;
          this.companyLicenseForm.contactName =
            this.companyLicenseForm2.contactName;
          this.companyLicenseForm.contactPhone =
            this.companyLicenseForm2.contactPhone;
          this.companyLicenseForm.contactEndDate =
            this.companyLicenseForm2.contactEndDate;
          this.companyLicenseForm.contactNum =
            this.companyLicenseForm2.contactNum;
        } else {
          form2 = false;
          if (this.enterpriseIdCardFontPicFileUrl == "") {
            return this.$Message.error("请上传联系人身份证正面");
          }
          if (this.enterprIseidCardBackPicFileUrl == "") {
            return this.$Message.error("请上传联系人身份证反面");
          }
          if (this.handHeldProgressIdCard == "") {
            return this.$Message.error("请上传联系人手持身份证");
          }
          return this.$Message.error("联系人信息资料不完整");
        }
      });
      this.$refs.companyLicenseForm3.validate((valid) => {
        if (valid) {
          form3 = true;
          this.companyLicenseForm.legalpersonName =
            this.companyLicenseForm3.legalpersonName;

          this.companyLicenseForm.legalpersonPhone =
            this.companyLicenseForm3.legalpersonPhone;

          this.companyLicenseForm.legalpersonEndDate =
            this.companyLicenseForm3.legalpersonEndDate;

          this.companyLicenseForm.legalpersonNum =
            this.companyLicenseForm3.legalpersonNum;
        } else {
          form3 = false;
          if (this.corporateidCardFontPicFileUrl == "") {
            return this.$Message.error("请上传法人身份证反面");
          }
          if (this.corporateidCardBackPicFileUrl == "") {
            return this.$Message.error("请上传法人身份证反面");
          }
          if (this.holdIdCardFileId == "") {
            return this.$Message.error("请上传法人手持身份证");
          }
          return this.$Message.error("法人信息资料不完整");
        }
      });
      if (form && form2 && form3) {
        this.$refs.companyLicenseForm.validate((valid) => {
          if (valid) {
            this.loadinLicenseInfo = true;
            this.companyLicenseForms.startDate = this.timeText(
              this.companyLicenseForms.startDate
            );
            this.companyLicenseForms.endDate = this.timeText(
              this.companyLicenseForms.endDate
            );
            this.companyLicenseForms.contactStartDate = this.timeText(
              this.companyLicenseForms.contactStartDate
            );
            this.companyLicenseForms.contactEndDate = this.timeText(
              this.companyLicenseForms.contactEndDate
            );
            this.companyLicenseForms.legalpersonEndDate = this.timeText(
              this.companyLicenseForms.legalpersonEndDate
            );
            this.companyLicenseForm.userId = this.companyLicenseForms.userId;
            saveCompanyLicenseInfo(this.companyLicenseForm).then((res) => {
              this.loadinLicenseInfo = false;
              if (res.success) {
                this.$Message.success("企业认证信息提交成功");
                this.getDataList();
              } else {
                this.$Message.error(res.message);
              }
            });
          }
        });
      }
    },
    // 时间去横杠
    timeText(val) {
      let text = "";
      if (val) {
        let arr = val.split("");
        arr.forEach((item) => {
          if (item == "-") {
          } else {
            text += item;
          }
        });
      }
      return text;
    },
    setCurrentValue(value) {
      if (value === this.visible) {
        return;
      }

      this.visible = value;
    },
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.$emit("input", value);
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="less">
@import "../../../styles/drawer-common.less";
</style>

